<!--
 * @Description: ；数据面板
 * @Author: hanyu
 * @Date: 2022-03-03 09:22:11
 * @LastEditTime: 2022-04-14 21:26:54
 * @LastEditors: hanyu
-->
<template>
  <div class="radius-page">
    <div class="page-content">
      <div class="page-left">
        <div class="left-top">
          <div class="title-box">
            <img class="bar-title-icon" src="@/assets/img/bar-top.png" alt="" />
            敏感级别
          </div>
          <LeftTopChart v-model="leftTopData" />
          <Spin size="large" fix v-if="leftTopChartLoading"></Spin>
        </div>
        <div class="left-bottom">
          <div class="title-box title-box-light">
            <img class="bar-title-icon" src="@/assets/img/gray-allow.png" alt="" />
            违规类别
          </div>
          <LeftBottomChart v-model="leftBottomData" />
          <Spin size="large" fix v-if="leftBottomChartLoading"></Spin>
        </div>
      </div>
      <div class="page-center flex-center">
        <div class="web-num flex-center" @click="onPage('WebData')">
          <div class="num-title">
            {{ homeData.website_count || 0 }}
          </div>
          <div class="num-desc">网站数量</div>
        </div>
        <div class="web-now-num flex-center" @click="onPage('WarningInfo', { date_type: 'day' })">
          <div class="num-title">
            {{ homeData.today_illegal_website_count || 0 }}
          </div>
          <div class="num-desc">当日违规网站数量</div>
        </div>
        <div class="center-page">
          <div class="center-page-header flex-center">
            <div class="col1">名称</div>
            <div class="col2">涉及敏感词</div>
            <div class="col3">取证时间</div>
          </div>
          <div class="center-page-content" @scroll="scrollEvent">
            <div class="page-row flex-center" v-for="(item, index) in homeData.vio_content_list" :key="index" @click="onDetail(item)">
              <div class="row1">
                {{ item.main }}
              </div>
              <div class="row2 one-row" style="text-align: left">
                {{ item.title }}
              </div>
              <div class="row3">
                {{ item.ctime }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="page-right">
        <div class="right-top">
          <div class="title-box">
            <img class="bar-title-icon" src="@/assets/img/bar-top.png" alt="" />
            网站类型
          </div>
          <RightTopBar v-model="homeData.website_category" />
        </div>
        <div class="right-bottom">
          <div class="title-box">
            <img class="bar-title-icon" src="@/assets/img/bar-top.png" alt="" />
            社交账号违规趋势
          </div>
          <RightBottomChart :dateType="sendParams.type" v-model="rightBottomData" />
          <Spin size="large" fix v-if="rightBottomChartLoading"></Spin>
          <!-- <div class="date-box">
                        <img src="@/assets/img/date-top-icon.png" alt="">
                        <div class="date-name" @click="changeDate('day')" :class="{'active-name': sendParams.type == 'day'}" style="margin-top: 0">
                            <div class="date-item">
                                日
                            </div>
                        </div>
                        <div class="date-name" @click="changeDate('week')" :class="{'active-name': sendParams.type == 'week'}">
                            <div class="date-item">
                                周
                            </div>
                        </div>
                        <div class="date-name" @click="changeDate('month')" :class="{'active-name': sendParams.type == 'month'}">
                            <div class="date-item">
                                月
                            </div>
                        </div>
                        <div class="date-name" @click="changeDate('season')" :class="{'active-name': sendParams.type == 'season'}">
                            <div class="date-item">
                                季
                            </div>
                        </div>
                    </div> -->
        </div>
      </div>
    </div>
    <div class="page-bottom">
      <div class="page-bottom-title">互联网巡查情况报告</div>
      <div class="flex-center" style="margin-top: 32px">
        <div class="bottom-left flex-center">
          <Select v-model="exportParams.sensitive_words_cate_id" placeholder="类别选择" style="text-align: left; margin-left: 30px; margin-right: 30px">
            <Option :value="item.id" v-for="(item, id) in categoryList" :key="id">
              {{ item.cate_name }}
            </Option>
          </Select>
          <img style="margin-right: 4px" class="icon" src="@/assets/img/c-select-icon.png" alt="" />
        </div>
        <div class="bottom-center" @click="onExport">生成报告</div>
        <div class="bottom-left flex-center" style="margin-left: 48px" @click="openDatePicker = true">
          <DatePicker
            @on-open-change="dateOpenChange"
            :open="openDatePicker"
            ref="datePicker"
            :options="dateOption"
            @on-change="changeDatePicker"
            style="width: 100%"
            type="daterange"
            placeholder="时间选择"
          ></DatePicker>
          <img style="margin-right: 4px" class="icon" src="@/assets/img/time-select-icon.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LeftTopChart from "./components/left-top-chart.vue";
import RightTopBar from "./components/right-top-chart.vue";
import LeftBottomChart from "./components/left-bottom-chart.vue";
import RightBottomChart from "./components/right-bottom-chart.vue";
import { allApi } from "@/api/allApi";
export default {
  components: { RightBottomChart, RightTopBar, LeftTopChart, LeftBottomChart },
  data() {
    //这里存放数据
    return {
      rightBottomData: [],
      leftTopData: [],
      leftBottomData: [],
      rightBottomChartLoading: false,
      leftBottomChartLoading: false,
      leftTopChartLoading: false,
      openDatePicker: false, // 是否显示日历
      dateOption: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        },
      },
      exportParams: {
        date_start: null,
        date_end: null,
        sensitive_words_cate_id: null, // 敏感词分类id
      }, // 导出的params
      categoryList: [],
      homeData: {
        vio_content_list: [],
      },
      sendParams: {
        type: "", // day  week  month  season
        page: 1,
      },
    };
  },
  mounted() {
    this.$store.dispatch("setActiveTab", null);
    this.sendParams.type = "day";
    this.getHomeData(true);
    this.sensitiveCategory();
    this.getMingan();
    this.getLeibie();
    this.getWeigui();
  },
  //方法集合
  methods: {
    // 监听中间滚动
    scrollEvent(e) {
      console.log(e.currentTarget.scrollTop, e.currentTarget.clientHeight, e.currentTarget.scrollHeight - 2);
      if (Math.ceil(e.currentTarget.scrollTop + e.currentTarget.clientHeight) >= e.currentTarget.scrollHeight - 2) {
        //容差：20px
        console.log("滚动到底部");
        this.sendParams.page += 1;
        this.getHomeData();
      }
    },
    // 获取违规趋势
    async getWeigui() {
      try {
        this.rightBottomChartLoading = true;
        const res = await allApi.Weigui();
        this.rightBottomData = res.data;
      } catch (error) {
        console.log(error);
      }
      this.rightBottomChartLoading = false;
    },
    // 获取违规类别
    async getLeibie() {
      try {
        this.leftBottomChartLoading = true;
        const res = await allApi.Leibie();
        this.leftBottomData = res.data;
      } catch (error) {
        console.log(error);
      }
      this.leftBottomChartLoading = false;
    },
    // 获取敏感等级
    async getMingan() {
      try {
        this.leftTopChartLoading = true;
        const res = await allApi.Mingan();
        this.leftTopData = res.data;
      } catch (error) {
        console.log(error);
      }
      this.leftTopChartLoading = false;
    },
    dateOpenChange(e) {
      this.openDatePicker = e;
    },
    // 改变日期
    changeDatePicker(e) {
      if (this.openDatePicker) {
        this.openDatePicker = false;
      }
      if (!e) {
        this.exportParams.date_start = null;
        this.exportParams.date_end = null;
        return;
      }
      this.exportParams.date_start = e[0];
      this.exportParams.date_end = e[1];
    },
    // 生成报告
    async onExport() {
      if (!this.exportParams.date_start) {
        this.$Message.warning("请选择时间范围");
        return
      }
      try {
        this.$Spin.show();
        const res = await allApi.IndexExport(this.exportParams);
        let url = res.data;
        // 生成一个a标签
        let link = document.createElement("a");
        link.style.display = "none";
        link.target = "_blank";
        link.href = url;
        // 生成时间戳
        link.download = url.split("/")[url.split("/").length - 1];
        document.body.appendChild(link);
        link.click();
      } catch (error) {
        console.log(error);
      }
      this.$Spin.hide();
    },
    // 敏感词分类
    async sensitiveCategory() {
      try {
        const res = await allApi.websiteCategory();
        this.categoryList = res.data.rows;
      } catch (error) {
        console.log(error);
      }
    },
    // 进入属地网站管理
    onPage(url, query) {
      this.$router.push({
        name: url,
        query: query || null,
      });
    },
    // 进入预警信息并过滤
    onDetail(item) {
      this.$router.push({
        name: "WarningInfo",
        query: {
          warningInfoItemId: item.id,
        },
      });
    },
    changeDate(type) {
      this.sendParams.type = type;
      this.getHomeData(false);
    },
    // 首页数据
    async getHomeData(showLoading) {
      try {
        if (showLoading) {
          this.$Spin.show();
        }
        let res = await allApi.getHomeData(this.sendParams);
        if (res.data.vio_content_list && res.data.vio_content_list.length == 0 && this.sendParams.page > 1) {
          // 没数据了
          this.sendParams.page -= 1;
          return;
        }
        res.data.vio_content_list = this.homeData.vio_content_list.concat(res.data.vio_content_list);
        this.homeData = res.data;
      } catch (error) {
        console.log(error);
      }
      if (showLoading) {
        this.$Spin.hide();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.page-content {
  width: 100%;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background: #edf0ff;
  padding: 4%;
  display: flex;
  .page-left {
    width: 30%;
    .left-top {
      width: 100%;
      height: 298px;
      background: #0064ee;
      border-radius: 25px;
      display: flex;
      justify-content: flex-end;
      position: relative;
      box-shadow: 0px 17px 15px 0px rgba(0, 100, 238, 0.21);
    }
    .left-bottom {
      width: 100%;
      margin-top: 30px;
      height: 298px;
      background: #fff;
      border-radius: 25px;
      display: flex;
      justify-content: flex-end;
      position: relative;
      box-shadow: 0px 17px 15px 0px rgba(0, 100, 238, 0.21);
    }
  }
  .page-center {
    width: 40%;
    position: relative;
    .web-num {
      position: absolute;
      top: -230px;
      left: 30px;
      width: 330px;
      height: 330px;
      background: url("../../assets/img/circle2.png") top center no-repeat;
      background-size: 100% 100%;
      flex-direction: column;
      cursor: pointer;
      .num-title {
        font-size: 100px;
        font-weight: bold;
        color: #0064ef;
        line-height: 1;
        margin-right: 20px;
      }
      .num-desc {
        color: #0064ef;
        font-size: 14px;
        margin-right: 10px;
      }
    }
    .web-now-num {
      position: absolute;
      top: -230px;
      left: 400px;
      width: 330px;
      height: 330px;
      background: url("../../assets/img/circle1.png") top center no-repeat;
      background-size: 100% 100%;
      flex-direction: column;
      cursor: pointer;
      .num-title {
        font-size: 100px;
        font-weight: bold;
        color: #f46c68;
        line-height: 1;
        margin-right: 20px;
      }
      .num-desc {
        color: #f46c68;
        font-size: 14px;
        margin-right: 10px;
      }
    }
    .center-page {
      width: 626px;
      height: 524px;
      box-shadow: 0px 17px 15px 0px rgba(0, 100, 238, 0.21);
      border-radius: 25px;
      margin-top: 100px;
      position: relative;
      overflow: hidden;
      .center-page-header {
        background: #0064ee;
        color: #fff;
        padding: 20px 0;
        .col1 {
          width: 20%;
        }
        .col2 {
          width: 50%;
        }
        .col3 {
          width: 30%;
        }
      }
      .center-page-content {
        overflow-y: scroll;
        overflow-x: hidden;
        cursor: pointer;
        color: #727171;
        height: 524px;
        padding: 0 20px;
        padding-bottom: 30px;
        .page-row {
          padding: 10px 0;
          border-bottom: 1px solid #868786;
          .row1 {
            width: 20%;
          }
          .row2 {
            width: 50%;
          }
          .row3 {
            width: 30%;
          }
        }
      }
    }
  }
  .page-right {
    width: 30%;
    .right-top {
      width: 100%;
      height: 298px;
      background: #0064ee;
      border-radius: 25px;
      display: flex;
      justify-content: flex-end;
      position: relative;
      box-shadow: 0px 17px 15px 0px rgba(0, 100, 238, 0.21);
    }
    .right-bottom {
      width: 100%;
      margin-top: 30px;
      height: 298px;
      background: #0064ee;
      border-radius: 25px;
      display: flex;
      justify-content: flex-end;
      position: relative;
      box-shadow: 0px 17px 15px 0px rgba(0, 100, 238, 0.21);
      position: relative;
      .date-box {
        background: #fcebbb;
        width: 34px;
        height: 264px;
        border-radius: 30px;
        position: absolute;
        left: 15px;
        top: 16px;
        img {
          width: 24px;
          height: 24px;
          margin-top: 18px;
          margin-bottom: 10px;
        }
        .date-name {
          position: relative;
          margin-left: 4px;
          border-top-left-radius: 15px;
          border-bottom-left-radius: 15px;
          padding: 4px;
          margin-top: 20px;
          .date-item {
            width: 22px;
            height: 22px;
            line-height: 1.5;
            border-radius: 50%;
            font-size: 12px;
            background: #0064ee;
            color: #fcebbb;
          }
        }
        .active-name {
          background: #0064ee;
          color: #0064ee;
          .date-item {
            background: #fcebbb;
            color: #0064ee;
            &::before {
              content: "";
              position: absolute;
              width: 12px;
              height: 12px;
              background: #fcebbb;
              right: 0px;
              border-radius: 50%;
              top: -12px;
            }
            &::after {
              content: "";
              position: absolute;
              width: 12px;
              height: 12px;
              background: #fcebbb;
              right: 0px;
              border-radius: 50%;
              bottom: -12px;
              z-index: 5;
            }
          }
          &::before {
            content: "";
            position: absolute;
            width: 6px;
            height: 6px;
            background: #0064ee;
            right: 0;
            top: -6px;
          }
          &::after {
            content: "";
            position: absolute;
            width: 6px;
            height: 6px;
            background: #0064ee;
            right: 0;
            bottom: -6px;
          }
        }
      }
    }
  }
}
.page-bottom {
  padding: 32px 0;
  text-align: center;
  background: transparent;
  .page-bottom-title {
    font-size: 26px;
    color: #ffffff;
    text-align: center;
    width: 100%;
  }
  .bottom-left {
    width: 332px;
    height: 52px;
    border-radius: 26px;
    border: 1px solid #fff;
    img {
      width: 44px;
      height: 44px;
    }
  }
  .bottom-center {
    cursor: pointer;
    width: 270px;
    height: 52px;
    line-height: 52px;
    border-radius: 26px;
    background: #fff;
    color: #0064ef;
    margin-left: 52px;
  }
}

.title-box {
  font-size: 18px;
  color: #fff;
  padding-top: 4%;
  text-align: right;
  padding-right: 8%;
  padding-bottom: 1%;
  border-bottom: 1px solid #fff;
  width: 88%;
  position: absolute;
  right: 0;
  img {
    width: 14px;
    height: 14px;
  }
}
.title-box-light {
  color: #868786;
  border-bottom: 1px solid #868786;
}
/deep/ .ivu-select-selection {
  background: transparent;
  border: none;
}
/deep/ .ivu-select-arrow {
  display: none;
}
/deep/ .ivu-input-with-suffix {
  background: transparent;
  border: 0;
}
/deep/ ::-webkit-input-placeholder {
  /* WebKit browsers */

  font-size: 16px;
}
/deep/ .ivu-input-with-suffix {
  color: #fff;
}
/deep/ .ivu-select-selected-value {
  color: #fff;
}
/deep/ .ivu-date-picker-rel {
  padding-left: 36px;
}
</style>
